<template>
  <div class="home">
    <div>基础案例</div>
    <!-- 从vuex中获取state数据 -->
    <div>{{$store.state.num}}</div>
    <!-- 基于计算属性进行处理 -->
    <div>{{myCount}}</div>
    <div>{{num}}</div>
    <div>{{total}}</div>
    <div>
      <button @click='handleClick1'>点击1</button>
      <button @click='handleClick2'>点击2</button>
    </div>
  </div>
</template>

<script>
// Vuex专门引入了一个函数简化状态获取操作
import { mapState } from 'vuex'

export default {
  data () {
    return {
      count: 10
    }
  },
  computed: {
    myCount () {
      return this.count + 100
    },
    ...mapState(['num', 'total'])
  },
  methods: {
    handleClick1 () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateNum', 1)
    },
    handleClick2 () {
      // this.num = this.num + 1
      // 点击按钮修改状态数据需要触发mutation
      this.$store.commit('updateTotal', 1)
    }
  }
}
</script>
